<template>
  <div class="category">
    <!-- Title -->
    <Title>分类</Title>
    <!-- 搜索 -->
    <Search class="search" :fatherMsg="toGoods"></Search>
    <div class="clear"></div>
    <!-- 分类区 -->
    <div class="classify core-container">
      <div class="sss">
        <div class="scroll-wrapper" ref="scroll">
          <!-- 左边分类 -->
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="(items,index) in items"
              :key="index"
              :title="items.text"
              @click="clickHandler(index)"
            />
          </van-sidebar>
        </div>
        <!-- 右边内容区 -->
        <div class="BxRight" ref="scrollAa">
          <div class="SxRight">
            <div
              class="rightBox scroll-wrapper1"
              v-for="(items,index) in items"
              :key="index"
              ref="scrollSa"
            >
              <!-- 右边导航吸顶 -->
              <div class="yyy">
                <van-sticky :container="container" >
                  <div class="rightTitle">{{items.text}}</div>
                </van-sticky>
                <van-grid :column-num="3">
                  <van-grid-item
                    v-for="(item,index) in items.children"
                    :key="index"
                    :icon="item.photo"
                    :text="item.text"
                    @click="handle(item.id)"
                  />
                </van-grid>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTotal } from "@/api/total.js";
import Vue from "vue";
import Title from "home/Title";
import Search from "home/Search";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
// 注册插件
BScroll.use(Pullup);
import {
  TreeSelect,
  Grid,
  GridItem,
  Sticky,
  // IndexBar,
  // IndexAnchor,
  Sidebar,
  SidebarItem
} from "vant";

Vue.use(TreeSelect);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Sticky);
// Vue.use(IndexBar);
// Vue.use(IndexAnchor);
Vue.use(Sidebar);
Vue.use(SidebarItem);

export default {
  data() {
    return {
      active: 0,
      totalList: [],
      items: [],
      container: null,
      photo: "s",
      // sidebar
      activeKey: 0,
      scrollY: 0, //右侧列表滑动的y轴坐标
      listHeight: [] //所有分类头部位置
    };
  },

  computed: {},
  methods: {
    async getTotal() {
      let rs = await getTotal();
      this.totalList = rs.data.body.result.filterList;
      for (var i = 0; i < this.totalList.length; i++) {
        var result = this.totalList[i].list.map(child => {
          return {
            text: child.name,
            id: child.id,
            checked: child.checked,
            photo: child.photo
          };
        });
        this.items.push({
          text: this.totalList[i].itemName,
          children: result
        });
      }
      // console.log(this.items);
      // console.log(this.totalList);
    },
    handle(id) {
      console.log(id);
      this.$router.push({
        path: "/goods",
        query: {
          goodsList: this.items.id
        }
      });
    },
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        click: true,
        scrollY: true,
        probeType: 3,
        pullUpLoad: true,
       
      });
      this.bsu = new BScroll(this.$refs.scrollAa, {
        click: true,
        scrollY: true,
        probeType: 3,
        pullUpLoad: true,

      });
      //监听右边滚动事件
      this.bsu.on('scroll', (pos) => {
        this.scrollY = Math.abs(pos.y);
      })
      console.log("this.$refs.scroll----->",this.$refs.scroll)
      console.log("this.$refs.scrollAa----->",this.$refs.scrollAa)
      console.log("this.bs----->",this.bs)
      console.log("this.bsua----->",this.bsu)
      this._registerHooks(["scroll", "scrollEnd"], pos => {
        console.log("done");
      });
    },
    //求出右边列表的高度
    _initRightHeight() {
      let itemArray = []; //定义一个伪数组
      let top = 0;
      itemArray.push(top)
      //获取右边所有li
      let allList = this.$refs.scrollAa.getElementsByClassName('rightBox');
      console.log('allList---->',allList)
      //allList伪数组转化成真数组
      Array.prototype.slice.call(allList).forEach(li => {
        top += li.clientHeight; //获取所有li的每一个高度
        itemArray.push(top)
      });
      this.listHeight = itemArray;
    },
    // 点击左边实现滚动
    clickHandler(index) {
      this.scrollY = this.listHeight[index];
      this.bsu.scrollTo( 0,-this.scrollY, 200, )
    },
    //左右联调
    _initLeftScroll(index) {
      // let menu = this.$refs.scrollSa;
      // let menu = this.$refs.scrollSa;
      // console.log('menu---->',menu)
      // let el = menu[index];
      // console.log('el--->',el)
      // new BScroll('.core-container', {}).scrollToElement(el, 300, 0, -300)
    },
    _registerHooks(hookNames, handler) {
      hookNames.forEach(name => {
        this.bs.on(name, handler);
      });
    },
    _registerHooks(hookNames, handler) {
      hookNames.forEach(name => {
        this.bsu.on(name, handler);
      });
    },
    
    // 调到商品页
    toGoods(){
      this.$router.push({
        path: "/goods",
      })
      console.log("search")
    }
  },
  created() {
    // this.getTotal();
    // var that = this
    // this.$nextTick(() => {
    //   setTimeout(function(){
    //     that.init()
    //   },500)
    // });
  },
  components: {
    Title,
    Search
  },
  mounted(index) {
    this.container = this.$refs.container;
    this.getTotal();
    this._initLeftScroll(index);
    var that = this
    this.$nextTick(() => {
      setTimeout(function(){
        that.init()
        //右边列表高度
        that._initRightHeight()
      },500)
    });
  },
  watch:{
    // this.getTotal(){
    //   this.$nextTick(() => {
    //     this.init()
    //   })
    // }
  }
}
</script>

<style  scoped>
.search {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
}
.clear {
  height: 0.54rem;
}
.category {
  height: 100%;
  overflow: hidden;
}
.van-tree-select__content /deep/ .van-sticky--fixed {
  position: fixed;
  /* top: -5; */
  width: 100%;
  z-index: 99;
  flex: 2;
  left: 33.3333% !important;
  background-color: #fff;
  /* width:100%; */
}
.rightTitle {
  padding-left: 15px;
  background-color: #fff;
  font-size: 12px;
}
.classify {
  height: calc(100vh - 1.7rem) !important;
}
.sss {
  height: 100%;
  flex: 1;
  display: flex;
}
.scroll-wrapper {
  height: 100%;
  /* float: left; */
  flex: 1;
}
.yyy {
  height: 100%;
}
.BxRight {
  height: 100%;
}
.SxRight {
  /* height:100% */
}
.van-sidebar {
  /* flex:1 */
  float: left;
}
.rightBox {
  /* flex:3 */
  /* float: */
}
</style>
